/**
 * 当前状态表页面
 * wangmei
 */
import React, { Component } from 'react';
import { Tabs, Row, Card, Col, Button, message, Spin, Modal } from 'antd';
import BreadcrumbCustom from '../../BreadcrumbCustom';
import * as images from '../../../style/imgs';
import * as Request from '../../../Server/Upgrade';
import * as Const from '../../../common/const';
import TablePage from '../../TablePage';
require('./sysinfo.css');

const TabPane = Tabs.TabPane;
let defaultActiveKey = '1';
const confirm = Modal.confirm;

class Current extends Component{
    constructor(props) {
        super(props);
        const { params } = this.props.match;
        const paramId = params.id;
        defaultActiveKey = paramId?paramId:'1'
        this.state = {
            loading: false, //表格加载样式
            data: [], //服务器数据
            data1: [], //响应数据
            totalData: {}, //总数据
            pagination: {
                defaultPageSize:50
            },
        };
    }

    componentWillMount() {
        this.getData();
    }

    getData = () =>{
        this.setState({loading: true});
        Request.logStatusGetStatus().then(res=>{
            if(res && res.code == Const.REQUEST_SUCCESS){
                const data = res.data;
                const statusMap = data.statusMap;
                let data1 = [];
                Const.CHARTSTATUS.map((item, index)=>{
                    let tempObj = statusMap[item.value];
                    tempObj.name = item.title;
                    data1.push(tempObj);
                })
                this.setState({
                    loading: false,
                    totalData: data,
                    data: data.versionVO,
                    data1: data1
                })
            }else {
                this.setState({loading: false});
                res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        })
    }

    //验证方法
    checkFunc = (row) =>{
        this.props.history.push({
            pathname:'/app/upgrade/sysInfo/current/validator'+ row.vertype+"&"+row.clientVersion,
        });
    }

    //同步方法
    syncRedisFunc = () =>{
        confirm({
            title: '此操作会删除所有redis缓存数据，并重新同步，请确认是否继续进行！',
            maskClosable: true,
            okText: "确定",
            cancelText: "取消",
            onOk: () => this.onOkFunc(),
            onCancel() { },
        });
    }
    onOkFunc = () =>{
        Request.logStatusSyncRedis().then(res=>{
            if(res && res.code == Const.REQUEST_SUCCESS ){
                message.success('同步成功');
            }else{
                message.error(res.msg);
            }
        });
    }

    render(){
        const { data1, data, pagination, loading, totalData } = this.state;
        let user = JSON.parse(localStorage.getItem('user'));
        let sysCompany = user.sysCompany;
        let state = sysCompany && sysCompany.id==1;

        const columns1 = [
            {
                title: "名称",
                dataIndex: "name",
                align: 'center',
                width: '25%'
            }, {
                title: "请求数目",
                dataIndex: "count",
                align: 'center',
                width: '25%',
            }, {
                title: "平均响应时间(ms)",
                dataIndex: "avgTime",
                align: 'center',
                width: '25%',
            }, {
                title: "最大响应时间(ms)",
                dataIndex: "maxTime",
                align: 'center',
                width: '25%',
            }
        ];

        const columns2 = [
            {
                title: "客户端版本",
                dataIndex: "clientVersion",
                align: 'center',
                width: '14%',
                render:(text, record)=>{
                    return record.vertype+':'+ text
                }
            }, {
                title: "服务端版本",
                dataIndex: "patchversion",
                align: 'center',
                width: '14%',
            }, {
                title: "动作数目",
                dataIndex: "actionNum",
                align: 'center',
                width: '15%',
            }, {
                title: "信息数目",
                dataIndex: "infoNum",
                align: 'center',
                width: '15%',
            }, {
                title: "设置数目",
                dataIndex: "settingNum",
                align: 'center',
                width: '15%',
            }, {
                title: "服务端地址",
                dataIndex: "svrRoot",
                align: 'center',
                width: '15%',
            }, {
                title: "操作",
                key: "action",
                align: 'center',
                width: '12%',
                render: (text, record) => (
                    <Button size='large' onClick={()=>this.checkFunc(record)}>验证</Button>
                )
            }
        ];

        return(
            <div style={{height: '100%'}}>
                    <BreadcrumbCustom first={"当前状态表"} />
                    <Spin spinning={this.state.loading} >
                    <Row className="info-card" type="flex" align="middle">
                        <Col span={15}>
                            <Card style={{ width: '100%' }}>
                                <Row>
                                    <img src={images['mail']} className="img-style"/>
                                    <text className="card-text">数据情况</text>
                                </Row>
                                <Row>
                                    <Col span={10} offset={2}>
                                        <div className="label-text">累计通过人数</div>
                                        <div className="num-text" style={{ color: '#5A5A5A', cursor: 'default'}}>{totalData.allowCount}</div>
                                    </Col>
                                    <Col span={10} offset={2}>
                                        <div className="label-text">流量队列数量</div>
                                        <div className="num-text" style={{ color: '#5A5A5A', cursor: 'default'}}>{totalData.fluxQueueSize}</div>
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                        {state&&<Col span={8} offset={1}>
                            <Button onClick={this.syncRedisFunc} size='large'>同步Redis</Button>
                        </Col>}
                    </Row>
                    <Tabs defaultActiveKey={defaultActiveKey} type="card" >
                        <TabPane tab="响应数据" key="1">
                            <TablePage
                                dataSource={data1}
                                loading={loading}
                                columns={columns1}
                                pagination={pagination}
                                onChange={this.handleTableChange}
                            />
                        </TabPane>
                        <TabPane tab="服务器数据" key="2">
                            <TablePage
                                dataSource={data}
                                loading={loading}
                                columns={columns2}
                                pagination={pagination}
                                onChange={this.handleTableChange}
                            />
                        </TabPane>
                    </Tabs>
                </Spin>
            </div>
        )
    }
}

export default Current